@import 'npm-scss-util/src/npm-scss-util.scss';

$--color-primary: #4F65FE !default;
$--color-text-regular: #606266 !default;
$--color-success: #67C23A !default;
$--background-color-base: #F5F7FA !default;
$--color-text-secondary: #909399 !default;

@mixin when($state-prefix, $state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}
.npm-com-bg-upload {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: none;

  .icon-plus {
    position: absolute;
    width: r(40);
    height: r(40);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(./icon/plus.png) no-repeat;
    background-size: 100%;
  }

  &__input {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  &--picture-card {
    position: relative;
    display: inline-block;
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    cursor: pointer;
    line-height: 146px;
    vertical-align: top;

    i {
      font-size: 28px;
      color: #8c939d;
    }

    &:hover {
      border-color: $--color-primary;
      color: $--color-primary;
    }
  }
  &:focus {
    border-color: $--color-primary;
    color: $--color-primary;

    .el-upload-dragger {
      border-color: $--color-primary;
    }
  }

  &-list {
    margin: 0;
    padding: 0;
    list-style: none;

    &--picture-card {
      margin: 0;
      display: inline;
      vertical-align: top;

      .npm-com-bg-upload-list__item {
        overflow: hidden;
        background-color: #fff;
        border: r(1) solid #c0ccda;
        border-radius: r(6);
        box-sizing: border-box;
        width: r(148);
        height: r(148);
        margin: 0 r(8) r(8) 0;
        display: inline-block;

        &-thumbnail {
          width: 100%;
          height: 100%;
        }
      }
    }

    &__item {
      transition: all .5s cubic-bezier(.55,0,.1,1);
      font-size: 14px;
      color: $--color-text-regular;
      line-height: 1.8;
      margin-top: 5px;
      position: relative;
      box-sizing: border-box;
      border-radius: 4px;
      width: 100%;

      .npm-com-bg-upload-progress {
        position: absolute;
        top: 20px;
        width: 100%;
      }

      .npm-com-bg-upload-progress__text {
        position: absolute;
        right: 0;
        top: -13px;
      }

      .npm-com-bg-upload-progress-bar {
        margin-right: 0;
        padding-right: 0;
      }

      & .npm-com-bg-upload-icon-upload-success {
        color: $--color-success;
      }

      .npm-com-bg-upload-icon-close {
        display: none;
        position: absolute;
        top: 5px;
        right: 5px;
        cursor: pointer;
        opacity: .75;
        background: url(./icon/delete.png) no-repeat;
        background-size: 100%;
        width: r(20);
        height: r(20);
        color: $--color-text-regular;
        //transform: scale(.7);

        &:hover {
          opacity: 1;
        }
      }

      & .npm-com-bg-upload-icon-close-tip {
        display: none;
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 12px;
        cursor: pointer;
        opacity: 1;
        color: $--color-primary;
      }

      &:hover {
        background-color: $--background-color-base;
  
        .el-icon-close {
          display: inline-block;
        }
  
        .el-progress__text {
          display: none;
        }
      }

      @include when(-is, success) {
        .npm-com-bg-upload-list__item-status-label {
          display: block;
        }
  
        .npm-com-bg-upload-list__item-name:hover, .npm-com-bg-upload-list__item-name:focus {
          color: $--color-primary;
          cursor: pointer;
        }
  
        &:focus:not(:hover) {  /* 键盘focus */
          .npm-com-bg-upload-icon-close-tip {
            display: inline-block;
          }
        }
  
        &:not(.focusing):focus, &:active { /* click时 */
          outline-width: 0;
          .npm-com-bg-upload-icon-close-tip {
            display: none;
          }
        }
  
        &:hover, &:focus {
          .npm-com-bg-upload-list__item-status-label {
            display: none;
          }
        }
      }

      &-name {
        color: $--color-text-regular;
        display: block;
        margin-right: 40px;
        overflow: hidden;
        padding-left: 4px;
        text-overflow: ellipsis;
        transition: color .3s;
        white-space: nowrap;

        [class^="el-icon"] {
          height: 100%;
          margin-right: 7px;
          color: $--color-text-secondary;
          line-height: inherit;
        }
      }

      &-status-label {
        position: absolute;
        right: 5px;
        top: 0;
        line-height: inherit;
        display: none;
      }

      &-actions {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0, 0, 0, 0.5);
        transition: opacity 0.3s;

        .icon-zoom-in,
        .icon-delete {
          position: absolute;
          width: r(20);
          height: r(20);
          top: 50%;
          transform: translate(-50%, -50%);
        }

        .icon-zoom-in {
          background: url(./icon/big_icon.png) no-repeat;
          background-size: 100%;
          left: 38%;
        }

        .icon-delete {
          background: url(./icon/delete.png) no-repeat;
          background-size: 100%;
          right: 23%;
        }

        &:hover {
          opacity: 1;

          span {
            display: inline-block;
          }
        }

        &::after {
          display: inline-block;
          content: '';
          height: 100%;
          vertical-align: middle;
        }

        span {
          display: none;
          cursor: pointer;
        }

        span + span {
          margin-left: r(15);
        }
      }
    }
  }
}
